<template>
  <div>
    <div class="wrap_content">
      <div class="f-title">
        <!--导出任务列表-->
        <span @click = "returnPage" class="icon el-icon-arrow-left"></span>
        {{$t('customer.exportTaskList')}}
        <!--刷新-->
        <span @click.stop="freshSearch" class="refresh"><i class="iconfont icon-shuaxin"></i></span>
      </div>
      <div class="reportTask">
        <div style="color: #3b5998;margin: 10px 20px;">{{$t('customer.exportTaskList1')}}</div>
        
        <affix :label="$t('qualityCheck.condition')"></affix>
        <el-form>
          <el-form-item :label="$t('call.bAndETime')">
            <el-date-picker v-model="rangeTime"
                            type="datetimerange"
                            size="mini"
                            :editable = "false"
                            :picker-options="pickerOptions"
                            id="callExportPicker"
                            :placeholder="$t('public.timeRanges')"></el-date-picker></el-form-item>
          <el-form-item class="btn-group">
            <!-- <el-button @click = "returnPage"
                      class="primary_btn">{{$t('public.getback')}}</el-button> -->
            <el-button @click = "rest"
                      class="primary_btn">{{$t('public.reset')}}</el-button>
            <el-button type="primary"
                      @click="freshSearch"
                      class="primary_btn">{{$t('public.search2')}}</el-button></el-form-item>
        </el-form>
        <div class="tables">
          <div class="deploy">
            <div class="search-pagination">
              <Pagination
                :small="true"
                :currentPage="currentPage"
                :count="total"
                @turnPage="turnPage"
                :totalPage="totalPage"
              >
              </Pagination>
            </div>
          </div>
          <el-table :data="tableData" stripe style="width: 100%" v-loading = "tableLoading" size="mini">
            <el-table-column prop="createTime" :label="$t('customer.createTime')" min-width="200">
            </el-table-column>
            <el-table-column prop="state" :label="$t('customer.exportProgress')" min-width="80">
            </el-table-column>
            <el-table-column :label="$t('public.operate')" width="130">
              <template scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  v-if = "scope.row.flag === 'finish' || scope.row.flag === 'download'">
                  <!--@click.native.prevent="handleDownLoad(scope.$index, scope.row)">-->
                  <!--下载-->
                  <a :href="handleDownLoad(scope.$index, scope.row)" target="_blank" download>{{$t('public.download')}}</a>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  /**
   * reportExport 导出任务列表组件
   * @path components/business-modules/customer/reportExport.vue
   * @methods
   * getList 回调数据 导出进度处理成中文，对应字段包含 export 正在导出 finish 完成 download 已下载
   * handleCurrentChange 点击页码触发的事件
   * freshSearch 点击刷新触法的事件
   * handleDownLoad 下载事件
   */
  import Pagination from '@/components/public-modules/card/Pagination'
  import affix from '@/components/ui-modules/affix/Affix.vue'
  import {getDateTime} from '@/utils/m7Utils.js'
  export default {
    name: 'reportExport',
    data () {
      return {
        fromRouter: '', // 进入当前组件之前得路由
        exportTaskLimit: {},
        currentPage: 1,
        pageSize: 10,
        tableData: [],
        tableLoading: false,
        rangeTime: [],
        pickerOptions: {
          shortcuts: [{
            text: this.$t('sms.thisOneWeek'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('sms.thisOneMonth'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('sms.thisThreeMonth'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        total: 0
      }
    },
    components: {
      Pagination,
      affix
    },
    computed: {
      totalPage () {
        return Math.ceil(this.total / this.pageSize) || 0
      }
    },
    methods: {
      returnPage () {
        this.$router.push({path: this.fromRouter})
      },
      rest () {
        // 重置为[]: 如果为'' getDateTime()会报一个ERROR
        this.rangeTime = []
      },
      getList (val) {
        this.currentPage = val
        let data = {
          page: val || this.currentPage,
          pageSize: 10,
          startTime: '',
          endTime: ''
        }
        if (this.rangeTime && this.rangeTime[0]) {
          data.startTime = getDateTime(this.rangeTime[0])
          data.endTime = getDateTime(this.rangeTime[1])
        }
        this.$store.dispatch('queryExportTasks', data).then(resp => {
          this.tableData = resp.list
          this.tableLoading = false
          this.tableData.forEach((item, index) => {
            item.state = this.$t(`customer.${item.flag}`)
          })
          this.total = resp.count
        })
      },
      handleCurrentChange (val) {
        this.currentPage = val
        this.tableLoading = true
        this.getList(val)
      },
      turnPage (val) {
        this.currentPage = val
        this.tableLoading = true
        this.getList(val)
      },
      freshSearch () {
        this.tableLoading = true
        this.getList(1)
      },
      handleDownLoad (index, item) {
        return item.path
      }
    },
    beforeRouteEnter (to, from, next) {
      next(vm => {
        vm.fromRouter = from.fullPath
        console.log(from, 88888)
      })
    },
    beforeMount () {
      this.tableLoading = true
      this.getList(1)
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../../../assets/common.styl"
  .f-title
      position relative
      border-bottom 1px solid $c-border1
      height 39px
      line-height 39px
      background $cf-white
      padding-left 24px
      font-size 18px
      color $cf-gray1
      .icon
        color: #459ae9;
        display: inline-block;
        width: 18px;
        height: 18px;
        line-height: 18px;
        border: 1px solid #459ae9;
        border-radius: 50%;
        text-align: center;
        cursor pointer
        font-size 12px
        margin-right 8px
      .refresh
        width 70px
        border none
        height 31px
        font-size 20px
        color $c-main
        cursor pointer
        position absolute
        right -30px
        .icon-shuaxin
          font-size 20px
  .reportTask
      padding 0px 16px 20px
      .ui-affix
        margin-top 32px
        padding-bottom 10px
      .el-form
        padding-left 16px
        .btn-group
          text-align right
      .prompt
        color $c-prompt
        margin-bottom 10px
  .search-pagination
    float right
</style>